<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Pango</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Java Gnome, Pango, Java, programming, Linux">
<meta name="description" content="Pango">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Pango</h1>

<p>
In this part of the Java Gnome programming tutorial, we will explore the Pango library.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Pango is a free and open source computing library for rendering internationalized 
texts in high quality. Different font backends can be used, allowing cross-platform support.
(wikipedia)
</p>
<p>
Pango provides advanced font and text handling that is used for Gdk and Gtk. 
</p>

<h2>Quotes</h2>

<p>
In our first example, we show, how to change font for the <b class="keyword">Label</b> widget.   
</p>

<div class="codehead">quotes.java</div> 
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Fixed;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;
import org.gnome.pango.FontDescription;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program uses the pango library to 
 * display text. 
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GQuotes extends Window {

    public GQuotes() {
    
        setTitle("Quotes");
    
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
    
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    
    public void initUI() {
        String text = "Excess of joy is harder to bear than any amount\n" +
        "of sorrow.  The more one judges, the less one loves.\n" +
        "There is no such thing as a great talent without great will power.";
        
        Label label = new Label(text);

        FontDescription fontdesc = new FontDescription("Purisa 9");
        label.modifyFont(fontdesc);

        Fixed fix = new Fixed();

        fix.put(label, 5, 5);
        add(fix);
    }
    
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GQuotes();
        Gtk.main();
    }
}
</pre>

<p>
In the above code example, we have a label widget with three quotations. 
We change it's font to Purisa 9.
</p>

<pre class="explanation">
 String text = "Excess of joy is harder to bear than any amount\n" +
 "of sorrow.  The more one judges, the less one loves.\n" +
 "There is no such thing as a great talent without great will power.";
</pre>

<p>
This is the text to show in the label.
</p>

<pre class="explanation">
 FontDescription fontdesc = new FontDescription("Purisa 9");
</pre>

<p>
The <b class="keyword">FontDescription</b> is used to specify the characteristics of a font to load.
</p>

<pre class="explanation">
 label.modifyFont(fontdesc);
</pre>

<p>
We change the font of the label widget to Purisa 9.
</p>


<br>
<img src="/img/gui/javagnome/quotations.png" alt="Quotations">
<div class="figure">Figure: Quotations</div>
<br>


<h2>Pango markup</h2>

<p>
In the following example, we will use Pango markup language
to modify font in the <b class="keyword">ExposeEvent</b> event.
</p>

<div class="codehead">markup.java</div> 
<pre class="code">
package com.zetcode;

import org.freedesktop.cairo.Context;

import org.gnome.gdk.Event;
import org.gnome.gdk.EventExpose;
import org.gnome.gtk.DrawingArea;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.pango.FontDescription;
import org.gnome.pango.Layout;


/**
 * ZetCode Java Gnome tutorial
 *
 * This program uses Pango markup language
 * to modify the text.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GPangoMarkup extends Window implements Widget.ExposeEvent {

    String quote = "&lt;span foreground='blue' size='19000'&gt;The only " +
        "victory over love is flight&lt;/span&gt;";


    public GPangoMarkup() {
    
        setTitle("Pango Markup");
    
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        move(150, 150);
        showAll();
    }
    
    
    public void initUI() {
        
        DrawingArea darea = new DrawingArea();
        darea.connect(this);
        darea.queueDraw();
        add(darea);
        setBorderWidth(5);
        
    }
    
    public boolean onExposeEvent(Widget widget, EventExpose eventExpose) {
    
        final Context cr;
        final Layout layout;
        final FontDescription desc;

        cr = new Context(widget.getWindow());
        layout = new Layout(cr);

        desc = new FontDescription("Sans 12");
        layout.setFontDescription(desc);
        layout.setMarkup(quote);

        widget.setSizeRequest(layout.getPixelWidth(), layout.getPixelHeight());
        cr.showLayout(layout);
    
        return false;
    }
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GPangoMarkup();
        Gtk.main();
    }
}
</pre>

<p>
Drawing is done with Cairo library. We get a Layout by 
passing the Cairo drawing Context.
</p>

<pre class="explanation">
 cr = new Context(widget.getWindow());
</pre>

<p>
This code line creates a <b class="keyword">Context</b> object. 
</p>

<pre class="explanation">
 layout = new Layout(cr);
</pre>

<p>
A <b class="keyword">Layout</b> represents a paragraph of text, 
together with its attributes.
</p>

<pre class="explanation">
 layout.setMarkup(quote);
</pre>

<p>
This line sets the markup for the layout.
</p>

<pre class="explanation">
 widget.setSizeRequest(layout.getPixelWidth(), layout.getPixelHeight());
</pre>

<p>
This is to show all the text in the window. 
</p>

<pre class="explanation">
 cr.showLayout(layout);
</pre>

<p>
Finally, the text is drawn. 
</p>

<br>
<img src="/img/gui/javagnome/markup.png" alt="Pango markup">
<div class="figure">Figure: Pango markup</div>
<br>


<h2>Unicode</h2>

<p>
Pango is used to work with internationalized text. 
</p>

<div class="codehead">unicode.java</div> 
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Fixed;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;
import org.gnome.pango.FontDescription;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program shows text in 
 * azbuka.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GUnicode extends Window {

    public GUnicode() {
    
        setTitle("Unicode");
        
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    public void initUI() {
    
        String text = 
        "Фёдор Михайлович Достоевский родился 30 октября (11 ноября)\n" +
        "1821 года в Москве.Был вторым из 7 детей. Отец, Михаил Андреевич,\n" +
        "работал в госпитале для бедных. Мать, Мария Фёдоровна\n" +
        "(в девичестве Нечаева), происходила из купеческого рода.";
        
        Label label = new Label(text);

        FontDescription fontdesc = new FontDescription("Purisa 9");
        label.modifyFont(fontdesc);

        Fixed fix = new Fixed();

        fix.put(label, 5, 5);
        add(fix);
        
        setBorderWidth(5);
    }
    
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GUnicode();
        Gtk.main();
    }   
}
</pre>

<p>
We show some text in azbuka. 
</p>

<pre class="explanation">
 String text = 
        "Фёдор Михайлович Достоевский родился 30 октября (11 ноября)\n" ...
</pre>

<p>
We can directly use unicode text. However, text is never put inside
the source code. In real worl applications, we put text in external files.
In Java these are often property files. 
</p>

<pre class="explanation">
 Label label = new Label(text);
</pre>

<p>
We normally use it in the label widget. 
</p>

<br>
<img src="/img/gui/javagnome/unicode.png" alt="Unicode">
<div class="figure">Figure: Unicode</div>
<br>

<hr class="btm">

<p>
In this chapter of the Java Gnome programming tutorial, we worked with
the Pango library.
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 11, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


